<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <title>名人推荐</title>
		<link rel="stylesheet" type="text/css" href="css/default.css" />

        <link rel="stylesheet" type="text/css" href="css/style.css"/>

		<script src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.event.drag.js"></script>
        <script type="text/javascript" src="js/jquery.touchSlider.js"></script>
        <script type="text/javascript">
$(document).ready(function(){

	$(".img_gallery").hover(function(){
		$("#btn_prev,#btn_next").fadeIn()
	},function(){
		$("#btn_prev,#btn_next").fadeOut()
	});
	
	$dragBln = false;
	
	$(".main_img").touchSlider({
		flexible : true,
		speed : 200,
		btn_prev : $("#btn_prev"),
		btn_next : $("#btn_next"),
		paging : $(".point a"),
		counter : function (e){
			$(".point a").removeClass("on").eq(e.current-1).addClass("on");//图片顺序点切换
			$(".img_font span").hide().eq(e.current-1).show();//图片文字切换
		}
	});
	
	$(".main_img").bind("mousedown", function() {
		$dragBln = false;
	});
	
	$(".main_img").bind("dragstart", function() {
		$dragBln = true;
	});
	
	$(".main_img a").click(function(){
		if($dragBln) {
			return false;
		}
	});
	
	timer = setInterval(function(){
		$("#btn_next").click();
	}, 5000);
	
	$(".img_gallery").hover(function(){
		clearInterval(timer);
	},function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		},5000);
	});
	
	$(".main_img").bind("touchstart",function(){
		clearInterval(timer);
	}).bind("touchend", function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		}, 5000);
	});
	
});
</script>

	</head>
    
	<body class="cbp-spmenu-push" >   
		
		<div class="container">		
			<div class="main">
                <div class="wrap">
	                <div class="header1">
			            <span class="gt"><img src="images/1-1.png"></span>
			            	名人推荐                    
			            <span style="float: right; font-size: 14px; margin-right: 5px;"><a href="denglu.html" style=" color: #fff;">登录</a>/<a href="zhuce.html" style=" color: #fff;">注册</a></span>                 
			            <div style="clear:both;"></div>        
				    </div>
                <div style="clear:both;"></div>
              	<div class="img_gallery">

                <div class="main_img" >
                    <ul>
                        <li><span class="img_1"></span></li>
                        <li><span class="img_2"></span></li>
                        <li><span class="img_3"></span></li>
                        
                        
                    </ul>
                </div>
                <div class="img_font">
                    <span>
                    <h2>保罗</h2>
                    <p>人生犹如一本书</p>
                    <p>愚蠢者草草翻过</p>
                    <p>聪明人细细阅</p>
                    <p>为何如此 </p> 
                    <p>因为他们只能读它一次</p>
                    </span>
                    
                    <span> 
                    <h2>憨豆</h2>
                    <p>我们的忧伤、快乐、思考</p>
                    <p>就像展翅瀚瀚宇宙的雄鹰</p>           
                    <p>自由灵活，是它的翅膀 </p> 
                    <p>神秘深邃，是它的目光</p>
                    <p>锋利刚强，是它爪子</p>
                    </span>
                    
                    <span>
                    <h2>查理</h2>
                    <p>人生犹如一本书</p>
                    <p>愚蠢者草草翻过</p>
                    <p>聪明人细细阅</p>
                    <p>为何如此 </p> 
                    <p>因为他们只能读它一次</p>
                    </span>
                  
                    
                  
                </div>
                
                <div class="mrtj_mrtj"><input type="button" name="" value="返回简介"></div>
                 <div class="xian"></div>
            </div>
           
			</div>
		</div>
	
       
	</body>
</html>

